<template>
	<div class="label-page-container">
		<el-form class="el_form" style="display: flex; justify-content: flex-start; padding: 10px 10px 10px 0">
			<el-button type="primary" @click="openAdd">添加标签</el-button>
		</el-form>

		<el-table
			border
			ref="tableRef"
			:tableLoading="tableLoading"
			:data="tableData.data"
			@selection-change="selectionChange"
			@currentChange="currentChange"
		>
			<el-table-column type="selection" width="55" v-if="props.needCheck" />
			<el-table-column prop="name" label="标签" align="center">
				<template v-slot="scope">
					<div style="display: flex; justify-content: center">
						<!-- backgroundColor: ' rgba($color: ' + scope.row.colorCode + ', $alpha: 0.5)', -->
						<div
							:style="{
								color: scope.row.colorCode,
								borderRadius: '5px',
								fontSize: '10px',
								paddingLeft: '15px',
								paddingRight: '15px',
								backgroundColor: colorHextoRGB(scope.row.colorCode),
							}"
						>
							{{ scope.row.name }}
						</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="explain" label="服务说明" align="center" />
			<el-table-column prop="weight" label="排序" align="center" />
			<el-table-column prop="createBy" label="创建人" align="center" />
			<el-table-column prop="createTime" label="创建时间" align="center" />
			<el-table-column label="操作" align="center" width="200">
				<template v-slot="scope">
					<el-button type="text" @click="openEdit(scope.row)">编辑</el-button>
					<el-button type="text" @click="del(scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-pagination
			background
			style="float: right; margin-top: 10px; margin-right: 30px"
			layout="prev, pager, next, jumper, ->, total"
			:page-size="tableData.size"
			:total="tableData.total"
			@current-change="currentChange"
		/>

		<add :isAdd="isAdd" :dialogVisible="addVisible" :row="clickItem" @handleClose="addClose"></add>
	</div>
</template>

<script setup lang="ts" name="role">
import { onMounted, reactive, ref, nextTick } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { NextLoading } from '/@/utils/loading';
import TableComponents from '/@/components/tableComponents/index.vue';
import { getLabel, delLabel } from '/@/api/api';
import add from './dialog/add.vue';

const props = defineProps({
	selectedList: {
		type: Array,
		default: () => [],
	},
	needCheck: {
		type: Boolean,
		default: () => false,
	},
});
const tableRef = ref();
const isAdd = ref(false);
const tableData = reactive({
	data: [],
	total: 0,
	page: 1,
	size: 20,
});
const tableLoading = ref(true);
const queryFrom = ref({});
const addVisible = ref(false);
const clickItem = ref({});

// 页面加载时
onMounted(() => {
	NextLoading.done();
	getData();
});

async function getData() {
	tableLoading.value = true;
	let par = {
		page: tableData.page,
		size: tableData.size,
		...queryFrom.value,
	};

	let { code, data } = await getLabel(par);
	if (code == 200) {
		tableData.data = data.list;
		tableData.total = data.total;
		tableLoading.value = false;

		nextTick(() => {
			setTimeout(() => {
				let arr = [];
				props.selectedList.forEach((item) => {
					arr.push(item.id);
				});
				tableData.data.forEach((item, index) => {
					if (arr.includes(item.id)) {
						tableRef.value.toggleRowSelection(tableData.data[index], true);
					}
				});
			}, 500);
		});
	}
}

function openAdd(item) {
	isAdd.value = true;
	clickItem.value = item;
	addVisible.value = true;
}

function addClose() {
	isAdd.value = true;
	addVisible.value = false;
	getData();
}

function openEdit(item: any) {
	isAdd.value = false;
	clickItem.value = item;
	addVisible.value = true;
}

async function del(item: any) {
	ElMessageBox.confirm('是否确认删除分类?', 'Warning', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(() => {
			handleDel(item);
		})
		.catch(() => {});
}

async function handleDel(item: any) {
	tableLoading.value = true;
	let par = {
		id: item.id,
	};

	let { code } = await delLabel(par);
	tableLoading.value = false;
	if (code == 200) {
		ElMessage.success('操作成功');
		getData();
	}
}

function colorHextoRGB(val) {
	let color = val;
	var t = {},
		bits = color.length == 4 ? 4 : 8, //假设是shorthand。 #fff, 那么bits为4位, 每一位代表的个属性, 其他的为8位 每两位代表一个属性 #ffffff00
		mask = (1 << bits) - 1; //表示字节占位符。 向左移4位或8位，var a = (1 << 4 ) - 1 -> 10000 - 1,  a.toString(2); // 1111。或者 8位的 1111 1111
	color = Number('0x' + color.substr(1)); //#ff0000 转变为16进制0xff0000;
	if (isNaN(color)) {
		return null; // Color
	}
	['b', 'g', 'r'].forEach(function (x) {
		var c = color & mask;
		color >>= bits;
		t[x] = bits == 4 ? 17 * c : c; // 0xfff ， 一个f应该代表 255, 应该当[0-255]，按15等份划分，每一等份间隔 17。 所以获得的值须要乘以17, 才干表示rgb中255的值
	});
	// 这里的a可以自己给值，0-1,给1就是直接rgb颜色值了，给小数就是rgba的颜色值了
	t.a = 0.1;
	// console.log('t', t);
	const rgba = 'rgba(' + t.r + ',' + t.g + ',' + t.b + ',' + t.a + ')';
	return rgba; // Color
}

const emit = defineEmits(['selectionChange']);
function selectionChange(checkedList) {
	emit('selectionChange', checkedList);
}
</script>

<style scoped lang="scss">
@import url('/@/theme/page/page.scss');

.label-page-container {
	padding: 0 20px 20px 20px;
}
</style>
